<template>
  <list-detail-layout>
    <template #detailMain>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">基本信息</h4>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">服务名称</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.serveName"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">服务代码</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.serveCode"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">服务状态</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="$options.filters.DictLabelFilter(serveInfor.status, serveData.serveStatusList)"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">服务说明</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.serveRemarks"
          ></table-ellipsis>
        </div>
      </div>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">发布配置</h4>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">支持车型</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.zcModelName"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">最低版本</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="lowestVersionStr"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">白天ICON</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.dayIcon ? serveInfor.dayIcon.fileName : ''"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">晚上ICON</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.nightIcon ? serveInfor.nightIcon.fileName : ''"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">静默激活</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="$options.filters.DictLabelFilter(serveInfor.activationType, serveData.activationTypeList)"
          ></table-ellipsis>
        </div>
      </div>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">补充信息</h4>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">限制条件说明</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.addRemarks"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">其他备注</span>
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            class="baseInfoItemContent"
            :text="serveInfor.otherRemarks"
          ></table-ellipsis>
        </div>
      </div>
    </template>
    <template #detailRight>
      <div class="baseInfo">
        <h4 class="withVerticleLineT4 title14">操作信息</h4>
        <!-- 创建时间 -->
        <div class="baseInfoItem">
          <span class="baseInfoItemName">{{ $t('timeOfCreation') }}</span>
          <table-ellipsis
            class="baseInfoItemContent"
            :text="$options.filters.moment(serveInfor.createTime)"
          ></table-ellipsis>
        </div>
        <!-- 创建人 -->
        <div class="baseInfoItem">
          <span class="baseInfoItemName">{{ $t('creator') }}</span>
          <table-ellipsis class="baseInfoItemContent" :text="serveInfor.createBy"></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">最近更新时间</span>
          <table-ellipsis
            class="baseInfoItemContent"
            :text="$options.filters.moment(serveInfor.updateTime)"
          ></table-ellipsis>
        </div>
        <div class="baseInfoItem">
          <span class="baseInfoItemName">最近更新人</span>
          <table-ellipsis class="baseInfoItemContent" :text="serveInfor.updateBy"></table-ellipsis>
        </div>
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { mapState } from 'vuex'
export default {
  components: {
    ListDetailLayout,
    TableEllipsis
  },
  props: {
    serveInfor: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    ...mapState({
      serveData: (state) => state.subscriptionMaintain
    }),
    lowestVersionStr () {
      if (!this.serveInfor.upgradeList) {
        return ''
      }
      const str = []
      for (let i = 0; i < this.serveInfor.upgradeList.length; i = i + 1) {
        str.push(this.serveInfor.upgradeList[i].lowestVersion)
      }
      return str.join('、')
    }
  },
  watch: {},
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.baseInfo {
  margin-bottom: 20px;
  padding-bottom: 15px;
  .baseInfoItem {
    font-size: 1.4rem;
    margin-top: 18px;
    position: relative;
    .baseInfoItemName {
      position: absolute;
      left: 0;
      top: 0;
    }
    .baseInfoItemContent {
      height: 18px;
      padding-left: 140px;
    }
  }
}
</style>
